plus
One form, one offset dot. dot+ is a capture product built on a mono foundation — where color signals state, shape signals interactivity, and weight signals hierarchy. This is the single source of truth for the mark, the tokens, and every place they're applied.
Principles
Five rules govern every decision. When a call is ambiguous, defer to these — they outrank taste.
Foundation over decoration
Every visual decision serves a function. No decorative gradients, no glass blur, no shadows for aesthetics.
Mono foundation, themeable
A near-black/near-white scale carries the system. Accent color exists only to communicate meaning. Light is a one-token swap.
Dense, not cluttered
More information per screen than a typical iOS app. Users are professionals — they want data density, not lifestyle spacing.
The mark is the indicator
The disc is the one element that takes color, and only for a reason — red while recording, blue for AI. Everywhere else, two flat tones.
Accessibility is non-negotiable
4.5:1 body contrast, 44×44pt hit targets, Dynamic Type and VoiceOver on every component. No exceptions.
Logo & mark
The mark comes in three parts that share one grammar: a solid disc offset into the lower-left of a rounded square. The disc sits on the baseline like a literal period.
Solid disc, lower-left of a rounded square. Scales down to the favicon where letters can't survive.
Inter Black, tight tracking, the leading dot drawn as a separate disc — the same disc, promoted to a letter.
The disc recolors for live moments: red while recording, blue for AI. The mark is the indicator.
Disc on the baseline, lower-left. Always ink-on-paper or paper-on-ink.
Never gradient the canvas. Two flat colors — no bevels, no glows.
Don't round the square into a circle. The rounded square is the form.
Construction
Rounded square at a 22.5% corner radius. The disc is 31% of the width, centered in the lower-left at 27.3% / 72.7%. Clear space equals one disc diameter on every side.
Color
Two layers: primitive palette values, and semantic tokens that reference them. Components bind only to semantic tokens — swapping the map is what enables Light / Dark.
#000000 / #FFFFFF for OLED punch — never the UI surface tokens. The disc's one accent, #E11900, appears only during capture.Typography
Two families. Inter carries display and UI; JetBrains Mono carries metadata, timestamps and labels. Nothing else.
Tokens
A 4pt grid governs spacing. Radius never exceeds 16 — dot+ is functional, not playful.
Spacing · 4pt grid
Corner radius
Elevation
Dark theme shows depth by tonal lift (900 → 800 → 700), never shadow. Light theme uses real shadows: 0 1px 2px cards · 0 4px 12px popovers · 0 12px 32px modals.
Iconography
SF-Symbol-style line icons on a 24pt grid, 1.5pt stroke, rounded caps and joins. No emoji, anywhere.
UI components
Core primitives. Fills, not outlines. Tinted secondaries. Semantic color only where it means something.
iOS widgets
dot+ is a capture app, so the brand lives in motion — the Dynamic Island, a notification, a home widget. The disc turns red only while recording, blue only for AI.
Presentation cards
16:9 slide templates. Title on near-black, section dividers on the accent red, content on the mono grid.
Email signatures
Two-tone, mark plus a hairline divider. No banner images — the signature stays light and renders in every client.
Stationery & print
On paper the system inverts to the Light theme: ink mark on white, red as one restrained accent. Compositions anchor to an edge — never a lone mark centered — and the disc never turns red on static collateral, because red means recording.
30 JUN 2026
Wordmark alone; red lives in the typographic dot, not the logo.
Ink mark; a red hairline anchors the base edge.
Red as the field; mark stays two-tone, anchored low-left.
Document output
Every capture becomes a document — a product surface dot+ generates automatically. There are two variants off one data model: a one-page Report (digest) and a long-form Minute (complete record). The generator fills content slots; it never restyles.
.plus lockup left, document REF and date right, over a 1.5px rule. Never a banner or cover image.Fecha, Participantes, Próxima acción — bounded by hairlines. Mono labels, Inter values.content.secondary; bold lifts to content.primary.break-inside:avoid.DOT-YYYY-MMDD) and capture date.{ label, body } — auto-numbered in order (summary, challenges, detail…).{ severity, title, body } — severity picks the card color.{ letter, title, body } — rendered neutral, no highlight.{ owner, task } — the action plan.Digital surfaces
The mark, sized for every avatar, icon and cover slot it lands in.